<script>
import { defineComponent, getCurrentInstance, ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { useCounterStore } from "../stores";
import { Liquid } from "@antv/g2plot";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useCounterStore();
    const taskArry = ref([]);
    const editArray = ref([]);
    const detailArray = ref([]);
    const childArray = ref([]);
    const projectArray = ref([]);
    const dialogVisible = ref(false);
    const userOptions = ref([]);
    const projectUser = ref("");
    const roleFlag = ref(Boolean(sessionStorage.getItem("flag")));
    const detailVisiable = ref(false);
    const taskList = () => {
      console.log(roleFlag.value);
      proxy.$http.get("/system/task/list").then(res => {
        console.log(res.data);
        taskArry.value = res.data;
      });
    };
    const edit = data => {
      console.log(data);
      dialogVisible.value = true;
      editArray.value = data;
    };
    const editTask = () => {
      proxy.$http
        .put("/system/task", {
          taskId: editArray.value.taskId,
          taskName: editArray.value.taskName,
          conscientious: editArray.value.conscientious,
          workingHours: editArray.value.workingHours,
          userIds: projectUser.value
        })
        .then(res => {
          console.log(res);
          dialogVisible.value = false;
          ElMessage({
            showClose: true,
            message: "修改任务信息成功 ^.^",
            type: "success"
          });
        })
        .catch(err => {
          ElMessage({
            showClose: true,
            message: "修改任务信息失败 X.x",
            type: "error"
          });
        });
    };
    const deleteTask = data => {
      proxy.$http
        .delete(`system/task/${data.taskId}`)
        .then(res => {
          ElMessage({
            showClose: true,
            message: "删除任务成功 ^.^",
            type: "success"
          });
        })
        .catch(err => {
          ElMessage({
            showClose: true,
            message: "删除任务失败 X.x",
            type: "error"
          });
        });
    };
    const showDetail = data => {
      detailVisiable.value = true;
      detailArray.value = data;
      store.setTaskArray(data);
      let liquidPlot;
      proxy.$http.get(`system/subtask/list/${data.taskId}`).then(res => {
        console.log(res);
        childArray.value = res.data;
        let statuss = 0;
        for (var i = 0; i < childArray.value.length; i++) {
          if (childArray.value[i].status == 1) {
            statuss++;
          }
        }
        console.log(statuss);
        let percents = statuss / childArray.value.length;
        liquidPlot = new Liquid("container", {
          percent: percents,
          outline: {
            border: 4,
            distance: 8
          },
          wave: {
            length: 128
          }
        });
        liquidPlot.render();
      });
      liquidPlot.destroy();
    };
    const editChildStatus = data => {
      proxy.$http
        .put(`system/subtask/`, {
          subtaskId: data.subtaskId,
          subtaskName: data.subtaskName,
          status: 1,
          taskIds: [store.taskArrayData.taskId]
        })
        .then(res => {
          showDetail(store.taskArrayData);
        });
    };
    const deleteChildTask = data => {
      proxy.$http.delete(`system/subtask/${data.subtaskId}`).then(res => {
        showDetail(store.taskArrayData);
      });
    };
    const userArray = () => {
      let map = {};
      proxy.$http.get(`system/user/list`).then(res => {
        for (var i = 0; i < res.rows.length; i++) {
          map = {
            value: res.rows[i].userId,
            label: res.rows[i].userName
          };
          userOptions.value = [map, ...userOptions.value];
        }
      });
    };
    const projectList = () => {};
    taskList();
    userArray();
    return {
      dialogVisible,
      taskArry,
      editArray,
      detailVisiable,
      detailArray,
      childArray,
      projectUser,
      userOptions,
      edit,
      editTask,
      deleteTask,
      showDetail,
      editChildStatus,
      deleteChildTask,
      projectList,
      roleFlag,
      store,
      userArray
    };
  }
});
</script>

<template>
  <div>
    <el-card>
      <el-scrollbar height="600px">
        <el-table :data="taskArry" style="width: 100%">
          <el-table-column prop="taskId" label="任务号" width="170"></el-table-column>
          <el-table-column prop="taskName" label="任务名" width="170"></el-table-column>
          <el-table-column prop="status" label="任务状态" width="170"></el-table-column>
          <el-table-column prop="conscientious" label="负责人" width="170"></el-table-column>
          <el-table-column prop="workingHours" label="任务时长" width="170"></el-table-column>
          <el-table-column prop="workingHours" label="剩余时长" width="170"></el-table-column>
          <el-table-column prop="createTime" label="开始时间" width="170"></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <div class="box">
                <el-tooltip :content="scope.row.taskName+`的详情`" placement="bottom" effect="light">
                  <el-button
                    type="success"
                    class="iconfont icon-xianshi1 hvr-grow"
                    circle
                    @click="showDetail(scope.row)"
                  ></el-button>
                </el-tooltip>
                <div v-if="roleFlag">
                  <el-tooltip :content="scope.row.taskName+`的修改`" placement="bottom" effect="light">
                    <el-button
                      type="primary"
                      class="iconfont icon-icon hvr-grow"
                      circle
                      @click="edit(scope.row)"
                      style="margin-left: 10px;"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip :content="scope.row.taskName+`的删除`" placement="bottom" effect="light">
                    <el-button
                      type="danger"
                      class="iconfont icon-icon1 hvr-grow"
                      circle
                      @click="deleteTask(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-card>
    <el-dialog title="编辑任务信息" width="40%" v-model="dialogVisible">
      <el-form
        :model="passForm"
        status-icon
        :rules="rules"
        ref="passForm"
        label-width="100px"
        class="grid2"
      >
        <el-form-item label="任务名：">
          <el-input v-model="editArray.taskName"></el-input>
        </el-form-item>
        <el-form-item label="负责人：">
          <el-select v-model="projectUser" placeholder="请选择任务负责人">
            <el-option
              v-for="item in userOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务时长：">
          <el-input v-model="editArray.workingHours"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible=false" class="hvr-grow">取 消</el-button>
          <el-button type="primary" @click="editTask()" class="hvr-grow">确 定</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
    <el-dialog
      :title="detailArray.taskName"
      width="40%"
      v-model="detailVisiable"
      v-if="detailVisiable"
    >
      <div class="text item">
        <div class="grid2">
          <div>
            任务编号:
            <el-tag>{{detailArray.taskId}}</el-tag>
          </div>
          <div>
            任务状态:
            <el-tag>{{detailArray.status}}</el-tag>
          </div>
          <div>
            任务负责人:
            <el-tag>{{detailArray.conscientious}}</el-tag>
          </div>
          <div>
            子任务:
            <el-table :data="childArray" style="width: 100%">
              <el-table-column prop="subtaskName" width="180"></el-table-column>
              <el-table-column prop="status" width="180"></el-table-column>
              <el-table-column width="180">
                <template #default="scope">
                  <div class="box" v-show="roleFlag">
                    <el-button
                      type="primary"
                      class="iconfont icon-icon hvr-grow"
                      circle
                      @click="editChildStatus(scope.row)"
                    ></el-button>
                    <el-button
                      type="danger"
                      class="iconfont icon-icon1 hvr-grow"
                      circle
                      @click="deleteChildTask(scope.row)"
                    ></el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            任务进度:
            <div id="container"></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: row;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  width: 100%;
}
.title {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 20px;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 3px;
}
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>
